<template>
	<div class="container home">
		<div class="header subheader">
			<Header></Header>
		</div>
		<div class="maincontainer" :class="wdtype==0?'wd1200':''">

			<div class="column-container">
				<!-- <el-button style="margin-top:20px" @click="goBack">返回</el-button> -->
				<!-- <div class="position"><span>首页</span><span>查企业</span>企业详情</div> -->
				<div class="title-h2">行政许可详情</div>
				<div class="column-main" style="padding: 24px 0px;">
					<div class="table-container">
							<div
								class="table-box el-table el-table--fit el-table--border el-table--enable-row-hover el-table--enable-row-transition el-table--medium">
								<table cellspacing="0" cellpadding="0" border="0" class="bigtable el-table__body">
									
									<tr class="el-table__row">
										<td class="el-table__cell table-name">
											<div class="cell">许可文件名称</div>
										</td>
										<td class="el-table__cell">
											<div class="cell" v-if="detailsdata.allow_filename != null">{{detailsdata.allow_filename}}</div>
											<div class="cell" v-else>--</div>
										</td>
										<td class="el-table__cell table-name">
											<div class="cell">许可文件编号</div>
										</td>
										<td class="el-table__cell">
											<div class="cell" v-if="detailsdata.allow_code != null">{{detailsdata.allow_code}}</div>
											<div class="cell" v-else>--</div>
										</td>
									</tr>
									<tr class="el-table__row">
										<td class="el-table__cell table-name">
											<div class="cell">许可内容</div>
										</td>
										<td class="el-table__cell">
											<div class="cell" v-if="detailsdata.allow_content != null">{{detailsdata.allow_content}}</div>
											<div class="cell" v-else>--</div>
										</td>
										<td class="el-table__cell table-name">
											<div class="cell">许可机关</div>
										</td>
										<td class="el-table__cell">
											<div class="cell" v-if="detailsdata.allow_authority != null">{{detailsdata.allow_authority}}</div>
											<div class="cell" v-else>--</div>
										</td>
									</tr>
									<tr class="el-table__row">
										<td class="el-table__cell table-name">
											<div class="cell">有效期自</div>
										</td>
										<td class="el-table__cell">
											<div class="cell" v-if="detailsdata.allow_startdate != null">{{detailsdata.allow_startdate.substr(0, 10)}}</div>
											<div class="cell" v-else>--</div>
										</td>
										<td class="el-table__cell table-name">
											<div class="cell">有效期至</div>
										</td>
										<td class="el-table__cell">
											<div class="cell" v-if="detailsdata.allow_enddate != null">{{detailsdata.allow_enddate.substr(0, 10)}}</div>
											<div class="cell" v-else>--</div>
										</td>
									</tr>
									
									<tr class="el-table__row">
										<td class="el-table__cell table-name">
											<div class="cell">数据来源</div>
										</td>
										<td class="el-table__cell" colspan="3">
											<div class="cell" v-if="detailsdata.data_source != null">{{detailsdata.data_source}}</div>
											<div class="cell" v-else>--</div>
										</td>
									</tr>
									
								</table>
							</div>
					</div>
				</div>
			</div>
		</div>
		<Footer></Footer>
		
	</div>
</template>

<script>
	import Header from "@/components/header";
	import Footer from "@/components/footer";
	export default {
		components: {
		  Header,
		  Footer
		},
		data() {
			return {
				detailsdata:'',
				wdtype:0
			};
		},
		mounted() {
			if(this.$route.query.wdtype == null){
				this.wdtype = 0
			}else{
				this.wdtype = this.$route.query.wdtype
			}
			this.detailsdata = JSON.parse(sessionStorage.getItem('itemdata'));
		},
		// beforeDestroy(){
		// 	sessionStorage.removeItem('itemdata')
		// },
		methods: {
			goBack() {
			    this.$router.go(-1); // 或者 this.$router.back()
			},
		}
	};
</script>

<style scoped lang="scss">
	.home {
		.subheader {
			height: 100px;
			background: linear-gradient(180deg, #3460D7 0%, #3D62CC 100%);

			.navbar {
				border-bottom: 1px solid rgba(255, 255, 255, 0.2);
				height: 100px;
				padding: 0 30px;

				.logo {
					display: flex;
					justify-content: center;
					align-items: center;
					height: 100px;
					font-size: 26px;
					color: #fff;
					font-weight: bold;
					margin-right: 8%;

					img {
						margin-right: 11px;
					}
				}

				.nav {
					display: flex;
					height: 100px;
					justify-content: center;
					align-items: center;
					font-size: 20px;
					color: #fff;
					font-weight: bold;

					.box {
						position: relative;
						height: 100px;
						line-height: 100px;

						span {
							position: absolute;
							left: 0;
							bottom: 0;
							height: 5px;
							background: #fff;
							display: block;
							width: 60px;
						}
					}

					.box::after {
						content: "|";
						margin: 0 36px;
						color: rgba(255, 255, 255, 0.2);
						font-weight: initial;
						font-size: 18px;
					}

					.box:last-child::after {
						display: none;
					}

				}

				.user {
					display: flex;
					height: 95px;
					justify-content: center;
					align-items: center;

					.box {
						font-size: 16px;
						line-height: 28px;
						color: #FFFFFF;
						font-weight: 400;
						background: url(../../assets/images/usericon.png) no-repeat left center;
						padding-left: 22px;
					}

					.bt {
						width: 62px;
						height: 28px;
						line-height: 28px;
						text-align: center;
						background: #FFFFFF;
						border-radius: 5px 5px 5px 5px;
						font-size: 12px;
						color: #000000;
						font-weight: 400;
						margin-left: 10px;
						cursor: pointer;
					}
				}
			}

			.slogan {
				color: #fff;
				font-size: 42px;
				color: #FFFFFF;
				text-align: center;
				font-weight: bold;
				letter-spacing: 3px;
				line-height: 55px;
				padding: 84px 0 54px;
			}

			.search {
				display: flex;
				justify-content: center;
				align-items: center;

				.box {
					display: flex;

					.search-bt {
						width: 120px;
						height: 53px;
						background: #217FE4;
						border-radius: 0px 4px 4px 0px;
						font-size: 22px;
						color: #FFFFFF;
						font-weight: 400;
						text-align: center;
						line-height: 53px;
						letter-spacing: 2px;
					}
				}

				.advanced-search {
					width: 32px;
					height: 40px;
					line-height: 20px;
					font-size: 16px;
					font-weight: 400;
					color: #FFFFFF;
					margin-left: 12px;
					cursor: pointer;
				}
			}
		}

		.enterprise-info {
			margin: 48px auto;
			overflow: hidden;

			.top-info {
				.icon-logo {
					margin-right: 16px;
					width: 76px;

					img {
						width: 100%;
					}
				}

				.info-name {
					position: relative;
				}

				.name {
					font-size: 28px;
					color: #000000;
					font-weight: bold;
					line-height: 37px;
					margin-bottom: 10px;

					span {
						width: 64px;
						height: 29px;
						background: #E3FCE9;
						border-radius: 4px 4px 4px 4px;
						display: inline-block;
						font-weight: 400;
						font-size: 16px;
						color: #24C84C;
						line-height: 29px;
						text-align: center;
						vertical-align: middle;
						margin-left: 13px;
					}
				}

				.tag-list {
					.el-tag {
						margin-right: 14px;
					}
				}

				.optional {
					position: absolute;
					right: 0;
					top: 50%;
					transform: translateY(-50%);
					display: flex;
					justify-content: center;
					align-items: center;
					width: 92px;
					height: 37px;
					background: #0071DF;
					border-radius: 2px 2px 2px 2px;
					font-weight: 400;
					font-size: 16px;
					color: #FFFFFF;
					cursor: pointer;

					img {
						margin-right: 2px;
					}
				}
			}

			.bottom-info {
				margin-top: 23px;
				background: #F2F9FF;
				border-radius: 4px 4px 4px 4px;
				border: 1px solid #E8EAEC;
				padding-top: 12px;

				.info-list {
					display: flex;

					.box {
						width: 45%;

						p {
							padding: 0 0 0 20px;
							margin: 0;
							height: 37px;
							line-height: 37px;
							font-weight: 400;
							font-size: 16px;
							color: #000000;

							em {
								color: #FF824B;
								margin-left: 4px;
								cursor: pointer;
							}
						}

						.mail {
							em {
								color: #0071DF;
							}
						}
					}

					.box:first-child {
						border-right: 1px solid #E8EAEC;
					}

					.box:last-child {
						padding-left: 58px
					}
				}

				.introduction {
					border-top: 1px solid #E8EAEC;
					padding: 8px 20px 8px 20px;
					margin-top: 8px;
					font-weight: 400;
					font-size: 16px;
					line-height: 37px;
					color: #000000;
				}
			}

			.monitor {
				margin: 47px auto 23px;

				.title {
					display: flex;
					justify-content: center;
					align-items: center;
					font-weight: bold;
					font-size: 20px;
					color: #FA9417;
					margin-right: 24px;
				}

				.text-list {
					display: flex;
					justify-content: left;
					align-items: center;
					height: 65px;
					font-size: 16px;
					color: #222;

					.box::after {
						content: "|";
						margin: 0 10px;
						color: #D1D1D1;
					}

					span {
						color: #FA9417;
					}
				}
			}
		}

		.column-container {
			.position{
				font-weight: 400;
				font-size: 18px;
				color: #6F6F6F;
				line-height: 24px;
				margin: 24px 0;
				background: url(../../assets/images/iconhome.png) no-repeat left center;
				padding-left: 26px;
				span{
					color: #0071DF;
				}
				span::after{
					content: '/';
					margin: 0 12px;
					color: #6F6F6F;
				}
			}
			.title-h2{
				font-weight: bold;
				font-size: 28px;
				color: #000000;
				line-height: 37px;
				margin-top: 24px;
			}
			.column-title {
				height: 58px;
				background: #EDF1F5;
				border-radius: 6px 6px 0px 0px;
				border: 1px solid #E0E0E0;
				overflow: hidden;

				.box {
					width: 16.6666%;
					float: left;
					text-align: center;
					height: 58px;
					line-height: 58px;
					font-weight: bold;
					font-size: 20px;
					color: #000000;

					span {
						font-weight: 400;
						font-size: 12px;
						color: #999999;
						margin-left: 4px;
					}
				}

				.box.cur {
					background: linear-gradient(90deg, #0071DF 0%, #5E99EC 100%, #649CED 100%);
					color: #fff;

					span {
						color: #fff;
					}
				}
			}

			.column-main {
				padding: 30px 24px;

				.table-container {
					.common-box {
						margin-bottom: 45px;
						overflow: hidden;
					}

					.common-box:last-child {
						margin-bottom: 0;
					}

					.pagination {
						float: right;
						margin-top: 26px;
					}

					.common-title {
						height: 42px;
						line-height: 42px;
						background: #E5F2FF;
						font-weight: bold;
						font-size: 18px;
						color: #0071DF;
						margin-bottom: 20px;
					}

					.common-title::before {
						content: '|';
						margin: 0 8px 0 14px;
					}

					.el-table {
						.cell {
							font-size: 16px;
							color: #000;
							line-height: 25px;
						}
					}

					.table-box {
						.bigtable {
							width: 100%;

							.table-name {
								background: #F7FBFF;
								// width: 200px;
							}
						}
					}

				}
			}
		}


		.common-footer {
			min-height: 79px;
			background: #EFF1F3;
			font-size: 12px;
			color: #656C74;
			line-height: 17px;
			margin-top: 98px;

			.topnav {
				padding: 16px 0 12px;
				text-align: center;
				display: flex;
				justify-content: center;

				.box::after {
					content: '|';
					margin: 0 12px;
					color: #656C74;
				}

				.box:last-child::after {
					display: none;
				}
			}

			.binfo {
				display: flex;

				.box {
					margin-right: 90px;
				}

				.box:last-child {
					margin-right: 0;
					background: url(../../assets/images/ficon01.png) no-repeat left center;
					padding-left: 20px;
				}
			}
		}
	}
</style>
<style>
	.el-table .cell {
		font-size: 16px;
		color: #000000;
		line-height: 25px;
		padding: 5px 20px;
		font-weight: 400;
	}
	.dialogtable .el-table .cell
	.el-table--border .el-table__cell:first-child .cell {
		padding-left: 20px;
	}

	.el-table .el-table__header-wrapper th,
	.el-table .el-table__fixed-header-wrapper th {
		background: #F7FBFF;
	}
	.dialogtable .el-table .cell{
		font-size: 14px;
		padding: 2px 15px;
	}
	.el-dialog__header{
		border-bottom: 2px dashed #eee;
	}
</style>